<template>
	<view class="container padding-top-sm">
		<view
			class="margin-left-sm round margin-right-sm flex justify-between align-center bg-color tabs text-df text-white">
			<view class="tab round text-center" :class="{'on':deliverType==1}" @click="changedeliver(1)">
				自提
			</view>
			<view class="tab round text-center" :class="{'on':deliverType==2}" @click="changedeliver(2)">
				快递
			</view>
		</view>
		<view v-if="deliverType==1"
			class="flex justify-start align-center radius10 bg-white padding-sm outlets bg-white margin-sm">
			<image :src="shop.logo" mode="" class="cu-avatar round"></image>
			<view class="margin-left" style="width: calc(100% - 104rpx)">
				<view class="text-15 text-333">
					{{ shop.shopName }}
				</view>
				<view class="text-cut margin-top-sm text-sm text-666">
					{{ shop.address }}
				</view>
			</view>
		</view>
		<view v-if="deliverType==2" class="radius10 bg-white padding-sm outlets bg-white margin-sm"
			@click="toPage('/filePage/pages/address-list/address-list?is_change=1')">

			<view class="" v-if="address">
				<view class="text-15 text-333">
					{{ address.receiver }}
				</view>
				<view class="text-cut margin-top-sm text-sm text-666">
					{{ address.addressInfo }}
				</view>
			</view>
			<view class="" v-else>
				请选择默认地址
			</view>
		</view>
		<view class="margin-sm padding-sm radius10 bg-white">
			<view class="flex justify-start" v-for="item in selectProduct" style="margin-bottom: 30rpx;">
				<image :src="item.pic" mode="" style="width: 166rpx;height: 166rpx;min-width: 166rpx;"></image>
				<view class="margin-left-sm flex-treble">
					<view class="text-13 text-333 flex justify-between">

						<view class="text-cut-2" style="width: 300rpx;max-width: 300rpx;">
							{{item.name}}
						</view>
						<view class="flex flex-direction align-end">
							<view class="">
								¥ {{parseFloat(item.price/100).toFixed(2)}}
							</view>
							<view class="text-999 margin-top-xs">
								×{{item.num}}
							</view>
						</view>
					</view>
					<!-- 	<view class="text-sm text-999 margin-top">
						{{item.attributes}}
					</view> -->
				</view>
			</view>
			<view class="flex justify-end align-center margin-top-sm">
				<view class="text-999 text-sm">
					共{{productNum}}件
				</view>
				<view class="margin-left flex justify-start align-center text-13">
					<view class="text-333">
						小计
					</view>
					<view class="color">
						¥ {{parseFloat(countPrice/100).toFixed(2)}}
					</view>
				</view>
			</view>
		</view>

		<view class="margin-sm padding-sm radius10 bg-white">
			<view class="text-181818 text-df">
				选择支付方式
			</view>
			<radio-group class="width-sub margin-top" @change="RadioChange">
				<view class="flex justify-between align-center">
					<view class="title text-13 flex justify-start align-center">
						<image :src="baseUrl + '/static/we-chat-pay.png'" mode="" style="width: 32rpx;height: 32rpx;">
						</image>
						<view class="">
							微信支付
						</view>
					</view>
					<radio class="radio yellow" :class="radio=='A'?'bg-white':''" :checked="radio=='A'?true:false"
						value="A"></radio>
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="title text-13 flex justify-start align-center">
						<image :src="baseUrl + '/static/balance.png'" mode="" style="width: 32rpx;height: 32rpx;">
						</image>
						<view class="">
							账户余额支付
						</view>
					</view>
					<radio class="radio yellow" :class="radio=='B'?'bg-white':''" :checked="radio=='B'?true:false"
						value="B"></radio>
				</view>
			</radio-group>
		</view>
		<view class="height100">

		</view>
		<view class="c-o-fooder flex justify-end align-center bg-white">
			<view class="flex justify-start align-center">
				<view class="text-df text-999">
					共{{productNum}}件
				</view>
				<view class="margin-left flex justify-start align-center text-15">
					<view class="text-333">
						总计
					</view>
					<view class="color">
						¥ {{parseFloat(countPrice/100).toFixed(2)}}
					</view>
				</view>
			</view>
			<button @click="submit" class="text-15 text-white round margin-left bg-to-right">
				去支付
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				radio: 'A',
				cartIds: [],
				shopId: '',
				type: '',
				info: {
					carDtoList: [],
					couponList: [],
					useCoupon: {},
					userAddress: {}
				},
				shop: {},
				deliverType: 1,
				couponHistoryId: '',
				couponHistoryName: '选择优惠券',
				modalName: null,
				buyNowProductInfo: {},
				selectProduct: [],
				productNum: 0,
				countPrice: 0,
				address: ''
			};
		},
		onLoad(options) {
			// console.log(options)
			if (options.cartIds) this.cartIds = JSON.parse(options.cartIds)
			if (options.shopId) {
				this.shopId = options.shopId

			}
			if (options.type) {
				this.type = options.type
			}
			if (options.selectProduct) {
				this.selectProduct = JSON.parse(options.selectProduct)
				console.log(this.selectProduct)
			}
			if (options.productNum) {
				this.productNum = options.productNum
			}
			if (options.countPrice) {
				this.countPrice = options.countPrice
			}
		},
		onUnload() {
			uni.setStorageSync('refresh',false)
		},
		onShow() {
			// console.log(uni.getStorageSync('isBack'))
			if (!uni.getStorageSync('isBack')) {
				
			}
			if(uni.getStorageSync('address')){
				this.address =  uni.getStorageSync('address')
			}else{
				this.getAddress()
			}
			this.getShop()
			

		},
		methods: {
			showModal() {
				this.modalName = "bottomModal";
			},
			hideModal() {
				this.modalName = null;
			},
			cheacked(e) {
				this.couponHistoryId = e.id
				this.couponHistoryName = e.couponName

			},
			changedeliver(e) {
				this.deliverType = e


			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},

			async getShop() {
				const [err, res] = await this.$get(this.$api.shop_detail, {
					id: this.shopId,
				});
				if (res) {
					this.shop = res.data;
					console.log(res)
					console.log(444444)
				}
			},

			async submit() {
				if (this.deliverType == 2 && !this.address) {
					return this.$util.msg('请选择收货地址')
				}
				// console.log(this.cartIds)
				const param = {
					cartIds: this.cartIds,
					deliverType: this.deliverType,
					shopId: this.shopId,
					productType: 2,
					userId: uni.getStorageSync('userId'),
					userAddressId: this.address.id,

				}
				const buyNowProductInfo = []
				for (let i in this.selectProduct) {
					const data = {
						buyNum: this.selectProduct[i].num,
						productId: this.selectProduct[i].id,
						shopId: this.selectProduct[i].shopId,
						shopType: this.selectProduct[i].shopType,
						userId: uni.getStorageSync('userId')
					}
					buyNowProductInfo.push(data)
				}
				param['buyNowProductInfo'] = buyNowProductInfo


				const [err, res] = await this.$jsonPost(this.$api.purchaseCreate, param)
				if (res) {
					// this.info = res.data
					// console.log(res)
					this.toPage('/pagesA/pages/purchase/purchase-pay?payType=' + this.radio +
						'&realAmount=' + res.data.realAmount + '&promoteAmount=' + res.data.promoteAmount +
						'&orderId=' + res.data.id)

				}



			},
			async getAddress() {
				const obj = {
					userId: uni.getStorageSync('userId'),
					pageNum: 1,
					pageSize: 99,
				}
				const [err, res] = await this.$get(this.$api.addressList, obj)
				if (res) {
					let state = res.data.list.find(val => val.isdefault == 1)
					console.log(state)
					if (state) {
						this.address = state
						console.log(this.address)
					} else {
						this.address = ''
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 4rpx;

		.tab {
			width: 350rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ED7200;
			font-weight: bold;
		}
	}

	.c-o-fooder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 20rpx;

		button {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>
